<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="typescript+vue3简单学习"><meta name="keywords" content="ts vue3"><meta name="author" content="晟松"><meta name="copyright" content="晟松"><title>typescript+vue3简单学习 | 晟松</title><link rel="shortcut icon" href="/logo.png"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c34d81d53341febe06a155941e2df16d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="true"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#typescript"><span class="toc-number">1.</span> <span class="toc-text">typescript</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.</span> <span class="toc-text">类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%9D%99%E6%80%81%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.1.</span> <span class="toc-text">静态类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.2.</span> <span class="toc-text">对象类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%B1%BB-%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.3.</span> <span class="toc-text">类 类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%B0%E7%BB%84"><span class="toc-number">1.1.4.</span> <span class="toc-text">数组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.1.5.</span> <span class="toc-text">函数类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%83%E7%BB%84-Tuple"><span class="toc-number">1.1.6.</span> <span class="toc-text">元组 Tuple</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE"><span class="toc-number">1.1.7.</span> <span class="toc-text">枚举</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Any"><span class="toc-number">1.1.8.</span> <span class="toc-text">Any</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.2.</span> <span class="toc-text">接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%E3%80%81%E7%B1%BB%E5%9E%8B%E6%8E%A8%E6%96%AD"><span class="toc-number">1.3.</span> <span class="toc-text">类型注解、类型推断</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E5%92%8C%E8%BF%94%E5%9B%9E%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3"><span class="toc-number">1.4.</span> <span class="toc-text">函数参数和返回类型注解</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%A9%E4%BD%99%E5%8F%82%E6%95%B0"><span class="toc-number">1.4.1.</span> <span class="toc-text">剩余参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD"><span class="toc-number">1.4.2.</span> <span class="toc-text">函数重载</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E7%B1%BB%E5%9E%8B%E6%95%B0%E7%BB%84"><span class="toc-number">1.5.</span> <span class="toc-text">特殊类型数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D%E4%B8%8E%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.6.</span> <span class="toc-text">类型别名与接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB"><span class="toc-number">1.7.</span> <span class="toc-text">类</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF"><span class="toc-number">1.7.1.</span> <span class="toc-text">继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%87%8D%E5%86%99"><span class="toc-number">1.7.2.</span> <span class="toc-text">重写</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">1.7.3.</span> <span class="toc-text">修饰符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="toc-number">1.7.4.</span> <span class="toc-text">构造函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#getter%E5%92%8Csetter"><span class="toc-number">1.7.5.</span> <span class="toc-text">getter和setter</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8A%BD%E8%B1%A1%E7%B1%BB"><span class="toc-number">1.7.6.</span> <span class="toc-text">抽象类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8A%8A%E7%B1%BB%E5%BD%93%E5%81%9A%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8"><span class="toc-number">1.7.7.</span> <span class="toc-text">把类当做接口使用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B%E5%92%8C%E7%B1%BB%E5%9E%8B%E4%BF%9D%E6%8A%A4"><span class="toc-number">1.8.</span> <span class="toc-text">联合类型和类型保护</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">1.9.</span> <span class="toc-text">类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E6%B3%9B%E5%9E%8B"><span class="toc-number">1.10.</span> <span class="toc-text">函数泛型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E6%95%B0%E7%BB%84"><span class="toc-number">1.10.1.</span> <span class="toc-text">泛型数组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%9A%E6%B3%9B%E5%9E%8B%E5%AE%9A%E4%B9%89"><span class="toc-number">1.10.2.</span> <span class="toc-text">多泛型定义</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-number">1.11.</span> <span class="toc-text">泛型接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E4%B8%AD%E6%B3%9B%E5%9E%8B"><span class="toc-number">1.12.</span> <span class="toc-text">类中泛型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E7%BB%A7%E6%89%BF"><span class="toc-number">1.12.1.</span> <span class="toc-text">泛型继承</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%9B%E5%9E%8B%E7%BA%A6%E6%9D%9F"><span class="toc-number">1.13.</span> <span class="toc-text">泛型约束</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4-namespace"><span class="toc-number">1.14.</span> <span class="toc-text">命名空间 namespace</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6"><span class="toc-number">1.15.</span> <span class="toc-text">声明文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#tsconfig-json"><span class="toc-number">1.16.</span> <span class="toc-text">tsconfig.json</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E7%BC%96%E8%AF%91%E6%96%87%E4%BB%B6"><span class="toc-number">1.16.1.</span> <span class="toc-text">选择编译文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#compilerOptions%E5%B1%9E%E6%80%A7"><span class="toc-number">1.16.2.</span> <span class="toc-text">compilerOptions属性</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue3-ts"><span class="toc-number">2.</span> <span class="toc-text">vue3+ts</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#props%E5%8F%82%E6%95%B0%E7%B1%BB%E5%9E%8B"><span class="toc-number">2.1.</span> <span class="toc-text">props参数类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE"><span class="toc-number">2.2.</span> <span class="toc-text">响应式数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vuex%E9%87%8C%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.3.</span> <span class="toc-text">vuex里的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vue-router%E9%87%8C%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.4.</span> <span class="toc-text">vue-router里的使用</span></a></li></ol></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">晟松</div><div class="author-info__description text-center">晟松的博客</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song">Gitee</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">52</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">45</span></a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(/img/blog-bg.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">晟松</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus">   <a class="site-page" href="/">Home</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="post-info"><div id="post-title">typescript+vue3简单学习</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-03-08</time><div class="post-meta-wordcount"><span>字数总计: </span><span class="word-count">5.3k</span><span class="post-meta__separator">|</span><span>阅读时长: 21 分钟</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><p>就是对之前学习的typescript的简单回顾和对vue3的配合使用</p>
<p>首先感谢一下我学习的博客 jspang.com 和其作者技术胖</p>
<p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1qV41167VD?p=1">ts视频教程</a></p>
<p><a target="_blank" rel="noopener" href="https://www.jspang.com/detailed?id=64">基础文章地址</a></p>
<h2 id="typescript"><a href="#typescript" class="headerlink" title="typescript"></a>typescript</h2><p>有些久没用过ts了，之前的知识点都忘了，现在再简单的学一遍吧</p>
<p>首先安装</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">npm install typescript -g</span><br></pre></td></tr></table></figure>

<p>可使用 <strong>tsc</strong> 命令查看是否安装完成</p>
<p>可使用</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">tsc demo.ts</span><br></pre></td></tr></table></figure>

<p>编译ts程序，生成js程序，再使用node跑js程序，但效率太低，可安装 <strong>ts-node</strong> 使用</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">ts-node demo.ts</span><br></pre></td></tr></table></figure>

<p>直接跑ts程序</p>
<h3 id="类型"><a href="#类型" class="headerlink" title="类型"></a><a target="_blank" rel="noopener" href="https://www.tslang.cn/docs/handbook/basic-types.html">类型</a></h3><p>就是定义了一个类型后，就只能对这个变量赋这个类型的值，当类型不匹配的时候，就会报错。并且这个变量也继承了这个类型上面的属性和方法</p>
<h4 id="静态类型"><a href="#静态类型" class="headerlink" title="静态类型"></a>静态类型</h4><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">let isDone: boolean = false;</span><br><span class="line">let name: string = `Gene`;</span><br><span class="line">let age: number = 37;</span><br></pre></td></tr></table></figure>

<p>其声明类型的方式就如上面所示</p>
<h4 id="对象类型"><a href="#对象类型" class="headerlink" title="对象类型"></a>对象类型</h4><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">let test1: &#123; name: string, age: number &#125; = &#123;</span><br><span class="line">    name: &#x27;test1&#x27;,</span><br><span class="line">    age: 20</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="类-类型"><a href="#类-类型" class="headerlink" title="类 类型"></a>类 类型</h4><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">class Person &#123;</span><br><span class="line">    say() &#123;</span><br><span class="line">        console.log(&#x27;person&#x27;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">let my:Person = new Person()</span><br></pre></td></tr></table></figure>

<p>以一个类为一个变量的类型，则这个变量只能是这个 类的实例</p>
<h4 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h4><p>有两种方式可以定义数组。 第一种，可以在元素类型后面接上 <code>[]</code>，表示由此类型元素组成的一个数组：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> list: <span class="built_in">number</span>[] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> list1: <span class="built_in">string</span>[] = [<span class="string">&#x27;cs&#x27;</span>,<span class="string">&#x27;j&#x27;</span>]</span><br></pre></td></tr></table></figure>

<p>第二种方式是使用数组泛型，<code>Array&lt;元素类型&gt;</code>：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> list: <span class="built_in">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br></pre></td></tr></table></figure>



<h4 id="函数类型"><a href="#函数类型" class="headerlink" title="函数类型"></a>函数类型</h4><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">let test2: () =&gt; string = () =&gt; &#123; return &#x27;string&#x27; &#125;</span><br></pre></td></tr></table></figure>

<p>只能是一个函数，并且还确定了函数的返回值必须是一个string类型</p>
<h4 id="元组-Tuple"><a href="#元组-Tuple" class="headerlink" title="元组 Tuple"></a>元组 Tuple</h4><p>元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 <code>string</code>和<code>number</code>类型的元组。把数组中的每个元素类型的位置给固定住了，这就叫做元组，虽然一般只会在csv数据格式的时候用到</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> x: [<span class="built_in">string</span>, <span class="built_in">number</span>];</span><br><span class="line">x = [<span class="string">&#x27;hello&#x27;</span>, <span class="number">10</span>]; <span class="comment">// OK</span></span><br><span class="line">x = [<span class="number">10</span>, <span class="string">&#x27;hello&#x27;</span>]; <span class="comment">// Error</span></span><br><span class="line">x = [<span class="number">10</span>, <span class="string">&#x27;hello&#x27;</span>,<span class="number">12</span>]; <span class="comment">// Error，不能越界，只能有两个值</span></span><br></pre></td></tr></table></figure>

<p>当访问一个越界的元素，会使用联合类型替代：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">x[<span class="number">3</span>] = <span class="string">&#x27;world&#x27;</span>; <span class="comment">// OK, 字符串可以赋值给(string | number)类型</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(x[<span class="number">5</span>].toString()); <span class="comment">// OK, &#x27;string&#x27; 和 &#x27;number&#x27; 都有 toString</span></span><br><span class="line"></span><br><span class="line">x[<span class="number">6</span>] = <span class="literal">true</span>; <span class="comment">// Error, 布尔不是(string | number)类型</span></span><br></pre></td></tr></table></figure>





<h4 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h4><p><code>enum</code>类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="built_in">enum</span> Color &#123;Red, Green, Blue&#125;</span><br><span class="line"><span class="keyword">let</span> c: Color = Color.Green;</span><br></pre></td></tr></table></figure>

<p>其里面的值默认从0开始，同时也可以对第一个值赋1，让其从1开始</p>
<p>enum里面的值都可以赋值，当然最好赋同一类型的值，防止奇怪的错误</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">enum</span> en &#123; book = <span class="string">&#x27;cs&#x27;</span>, water = <span class="number">3</span>, app = <span class="number">8</span> &#125;</span><br><span class="line"><span class="keyword">let</span> entest: en = en.book	<span class="comment">// cs</span></span><br></pre></td></tr></table></figure>



<h4 id="Any"><a href="#Any" class="headerlink" title="Any"></a>Any</h4><p>有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 <code>any</code>类型来标记这些变量：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> notSure: <span class="built_in">any</span> = <span class="number">4</span>;</span><br><span class="line">notSure = <span class="string">&quot;maybe a string instead&quot;</span>;</span><br><span class="line">notSure = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>



<h3 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h3><p>可以当做一个自定义静态类型，用来规范类型</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> cs &#123;</span><br><span class="line">    <span class="attr">uname</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> jcs: cs = &#123;</span><br><span class="line">    <span class="attr">uname</span>: <span class="string">&#x27;蒋晟松&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">15</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> sc: cs[] = [&#123;<span class="attr">uname</span>:<span class="string">&#x27;cs&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>&#125;]</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;jcs: &#x27;</span>, jcs); <span class="comment">// jcs:  &#123; uname: &#x27;蒋晟松&#x27;, age: 15 &#125;</span></span><br></pre></td></tr></table></figure>

<p>还可对一个接口里面的属性可选，因为有些属性不全是必须的</p>
<p>可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> SquareConfig &#123;</span><br><span class="line">  color?: <span class="built_in">string</span>;	<span class="comment">// 加一个?号</span></span><br><span class="line">  width?: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createSquare</span>(<span class="params">config: SquareConfig</span>): </span>&#123;color: <span class="built_in">string</span>; area: <span class="built_in">number</span>&#125; &#123;</span><br><span class="line">  <span class="keyword">let</span> newSquare = &#123;<span class="attr">color</span>: <span class="string">&quot;white&quot;</span>, <span class="attr">area</span>: <span class="number">100</span>&#125;;</span><br><span class="line">  <span class="keyword">if</span> (config.color) &#123;</span><br><span class="line">    newSquare.color = config.color;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (config.width) &#123;</span><br><span class="line">    newSquare.area = config.width * config.width;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> newSquare;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> mySquare = createSquare(&#123;<span class="attr">color</span>: <span class="string">&quot;black&quot;</span>&#125;);</span><br></pre></td></tr></table></figure>

<p>还可使用 redonly 进行指定变量不能变化</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Point &#123;</span><br><span class="line">    <span class="keyword">readonly</span> x: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">readonly</span> y: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line">et p1: Point = &#123; <span class="attr">x</span>: <span class="number">10</span>, <span class="attr">y</span>: <span class="number">20</span> &#125;;</span><br><span class="line">p1.x = <span class="number">5</span>; <span class="comment">// error!</span></span><br></pre></td></tr></table></figure>

<p>当然在我们的对象里面出现接口里面没有定义的属性的时候，会提示错误，所以可以在接口里面添加一个any类型的值</p>
<p>同时接口里面也能存一个<strong>方法</strong>，所以相应的对象也需要有一个方法</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> gril &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="built_in">number</span>,</span><br><span class="line">    height?: <span class="built_in">number</span>,</span><br><span class="line">    [propname: <span class="built_in">string</span>]: <span class="built_in">any</span>	<span class="comment">// 属性的名字是字符串类型，属性的值可以是任何类型。</span></span><br><span class="line">    say(): <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> my4: gril = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;cs&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">12</span>,</span><br><span class="line">    <span class="attr">cs</span>: <span class="string">&#x27;323&#x27;</span>,</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123; <span class="keyword">return</span> <span class="string">&#x27;21&#x27;</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>同时接口也可以<strong>与类结合</strong>，注意这几个属性的写法，特别是name和age是使用 <strong>=</strong> 进行赋值的，之后可以在实例中使用</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">class my5 implements gril &#123;</span><br><span class="line">    name = &#x27;cs&#x27;	</span><br><span class="line">    age = 45</span><br><span class="line">    say() &#123;</span><br><span class="line">        console.log(this.name);</span><br><span class="line">        return &#x27;78&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">// 类还可以实现多个接口</span><br><span class="line">class Car2 implements gril, boy &#123;</span><br><span class="line">    name = &#x27;cs&#x27;	</span><br><span class="line">    age = 45</span><br><span class="line">    say() &#123;</span><br><span class="line">        console.log(this.name);</span><br><span class="line">        return &#x27;78&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">    boy()&#123;</span><br><span class="line">        return &#x27;boy&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>接口之间也可进行继承</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Teacher <span class="keyword">extends</span> Girl &#123;</span><br><span class="line">  teach(): <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h3 id="类型注解、类型推断"><a href="#类型注解、类型推断" class="headerlink" title="类型注解、类型推断"></a>类型注解、类型推断</h3><p>类型注解其实就是对一个变量定义了一个类型，当我们需要这个变量的类型的时候，编译器就会提示我们这个变量是什么类型</p>
<p>类型推断就是不对一个变量声明类型，直接进行赋值，ts会自动推断这个变量应该是什么类型</p>
<p>这两个的用处就是，当ts能分辨一个变量的类型是什么的时候，我们就不要声明类型；当不能分辨的时候，就需要我们进行类型注解</p>
<h3 id="函数参数和返回类型注解"><a href="#函数参数和返回类型注解" class="headerlink" title="函数参数和返回类型注解"></a>函数参数和返回类型注解</h3><p>可对函数里面的参数指定类型和默认值</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params">a: <span class="built_in">string</span> = <span class="string">&#x27;21&#x27;</span>, b?: <span class="built_in">number</span> = <span class="number">45</span></span>): <span class="title">string</span> </span>&#123;	</span><br><span class="line">    <span class="keyword">let</span> s: <span class="built_in">string</span> = <span class="string">&#x27;32&#x27;</span></span><br><span class="line">    <span class="keyword">let</span> k: <span class="built_in">string</span> = <span class="string">&#x27;14&#x27;</span></span><br><span class="line">    <span class="keyword">return</span> s + k + a + b</span><br><span class="line">&#125;</span><br><span class="line">func(<span class="string">&#x27;cs&#x27;</span>, <span class="number">21</span>)</span><br></pre></td></tr></table></figure>



<h4 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a>剩余参数</h4><p>在 TypeScript 里，你可以把所有参数收集到一个变量里：<br>剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 编译器创建参数数组，名字是你在省略号（ <code>...</code>）后面给定的名字，你可以在函数体内使用这个数组。</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">info</span>(<span class="params">x: <span class="built_in">string</span>, ...args: <span class="built_in">string</span>[]</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(x, args)</span><br><span class="line">&#125;</span><br><span class="line">info(<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;a&#x27;</span>)</span><br></pre></td></tr></table></figure>



<p>当函数<strong>没有返回值</strong>的时候，可指定一个void类型，当函数里面有return语句的时候就会报错</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>): <span class="title">void</span> </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;void&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>当函数<strong>无法返回</strong>的时候，即抛出错误或者出现死循环，可指定一个never类型</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">errfunc</span>(<span class="params"></span>): <span class="title">never</span> </span>&#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>当函数的参数是对象的时候，如果需要对类型进行注解，需要</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">&#123; a, b &#125;: &#123; a: <span class="built_in">number</span>, b: <span class="built_in">number</span> &#125;</span>): <span class="title">number</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a + b</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> test4 = add(&#123; <span class="attr">a</span>: <span class="number">21</span>, <span class="attr">b</span>: <span class="number">65</span> &#125;)</span><br></pre></td></tr></table></figure>

<p>虽然这样写会很麻烦，但有一定的规则还是好一些的</p>
<h4 id="函数重载"><a href="#函数重载" class="headerlink" title="函数重载"></a>函数重载</h4><p>函数重载: 函数名相同, 而形参不同的多个函数</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 重载函数声明</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span> (<span class="params">x: <span class="built_in">string</span>, y: <span class="built_in">string</span></span>): <span class="title">string</span></span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">add</span> (<span class="params">x: <span class="built_in">number</span>, y: <span class="built_in">number</span></span>): <span class="title">number</span></span></span></span><br><span class="line"><span class="function"><span class="function"></span></span></span><br><span class="line"><span class="function"><span class="function">// 定义函数实现</span></span></span><br><span class="line"><span class="function"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">x: <span class="built_in">string</span> | <span class="built_in">number</span>, y: <span class="built_in">string</span> | <span class="built_in">number</span></span>): <span class="title">string</span> | <span class="title">number</span> </span>&#123;</span></span></span><br><span class="line"><span class="function"><span class="function">  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 <span class="title">x</span> + <span class="title">y</span></span></span></span><br><span class="line"><span class="function"><span class="function">  <span class="title">if</span> (<span class="params"><span class="keyword">typeof</span> x === <span class="string">&#x27;string&#x27;</span> &amp;&amp; <span class="keyword">typeof</span> y === <span class="string">&#x27;string&#x27;</span></span>) </span>&#123;</span></span><br><span class="line"><span class="function">    <span class="title">return</span> <span class="title">x</span> + <span class="title">y</span></span></span><br><span class="line"><span class="function">  &#125; <span class="title">else</span> <span class="title">if</span> (<span class="params"><span class="keyword">typeof</span> x === <span class="string">&#x27;number&#x27;</span> &amp;&amp; <span class="keyword">typeof</span> y === <span class="string">&#x27;number&#x27;</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> x + y</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="特殊类型数组"><a href="#特殊类型数组" class="headerlink" title="特殊类型数组"></a>特殊类型数组</h3><p>当数组里面有多种类型的时候</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1: (<span class="built_in">number</span> | <span class="built_in">string</span>)[] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="string">&#x27;cdl&#x27;</span>]</span><br></pre></td></tr></table></figure>

<p>当数组中有对象类型的时候，直接进行定义就会看着很麻烦，所以有一个东西叫 <strong>类型别名：type</strong>  </p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> xiaoJieJies: &#123; <span class="attr">name</span>: <span class="built_in">string</span>, <span class="attr">age</span>: <span class="built_in">Number</span> &#125;[] = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;刘英&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;谢大脚&quot;</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Lady = &#123; <span class="attr">name</span>: <span class="built_in">string</span>, <span class="attr">age</span>: <span class="built_in">Number</span> &#125;;</span><br><span class="line"><span class="keyword">const</span> xiaoJieJies: Lady[] = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;刘英&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;谢大脚&quot;</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;,</span><br><span class="line">];</span><br></pre></td></tr></table></figure>

<p>当然使用类进行定义也可以</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Madam</span> </span>&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">  age: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> xiaoJieJies: Madam[] = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;刘英&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;谢大脚&quot;</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;,</span><br><span class="line">];</span><br></pre></td></tr></table></figure>



<h3 id="类型别名与接口"><a href="#类型别名与接口" class="headerlink" title="类型别名与接口"></a>类型别名与接口</h3><blockquote>
<p>类型别名可以直接给类型，比如<code>string</code>，而接口必须代表对象。</p>
</blockquote>
<p>比如我们的<code>类型别名</code>可以写出下面的代码：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">type</span> Girl1 = stirng;</span><br></pre></td></tr></table></figure>

<p>但是接口就不能这样写，它必须代表的是一个对象，也就是说，你初始化<code>girl</code>的时候，必须写出下面的形式.</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Girl &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">  age: <span class="built_in">number</span>;</span><br><span class="line">  bust: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> girl = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;cs&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">bust</span>: <span class="number">94</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><p>感觉没多大差别</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">greet</span> </span>&#123;</span><br><span class="line">    hei = <span class="string">&#x27;cas&#x27;</span></span><br><span class="line">    <span class="attr">wid</span>: <span class="built_in">string</span>	<span class="comment">// 在ts里面可以先指定一个属性的类型，但不确认其值是否应该在实例里存在</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">width: <span class="built_in">string</span></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.wid = width</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.hei);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> my8 = <span class="keyword">new</span> greet(<span class="string">&#x27;87&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;my8: &#x27;</span>, my8); <span class="comment">// my8:  greet &#123; hei: &#x27;cas&#x27;, wid: &#x27;87&#x27; &#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h4><p>ts里面类的继承感觉跟js里面的差别不大，依旧使用 <strong>extends</strong> 关键字</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">theName: <span class="built_in">string</span></span>)</span> &#123; <span class="built_in">this</span>.name = theName; &#125;</span><br><span class="line">    <span class="function"><span class="title">move</span>(<span class="params">distanceInMeters: <span class="built_in">number</span> = <span class="number">0</span></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span> moved <span class="subst">$&#123;distanceInMeters&#125;</span>m.`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Snake</span> <span class="keyword">extends</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>)</span> &#123; <span class="built_in">super</span>(name); &#125;</span><br><span class="line">    <span class="comment">// 注意这里重写了父类的move方法</span></span><br><span class="line">    <span class="function"><span class="title">move</span>(<span class="params">distanceInMeters = <span class="number">5</span></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;Slithering...&quot;</span>);</span><br><span class="line">        <span class="built_in">super</span>.move(distanceInMeters);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Horse</span> <span class="keyword">extends</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>)</span> &#123; <span class="built_in">super</span>(name); &#125;</span><br><span class="line">    <span class="function"><span class="title">move</span>(<span class="params">distanceInMeters = <span class="number">45</span></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;Galloping...&quot;</span>);</span><br><span class="line">        <span class="built_in">super</span>.move(distanceInMeters);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> sam = <span class="keyword">new</span> Snake(<span class="string">&quot;Sammy the Python&quot;</span>);</span><br><span class="line"><span class="comment">// 父类型引用指向子类型的实例 ==&gt; 多态</span></span><br><span class="line"><span class="keyword">let</span> tom: Animal = <span class="keyword">new</span> Horse(<span class="string">&quot;Tommy the Palomino&quot;</span>);</span><br><span class="line"></span><br><span class="line">sam.move();</span><br><span class="line">tom.move(<span class="number">34</span>);</span><br></pre></td></tr></table></figure>

<h4 id="重写"><a href="#重写" class="headerlink" title="重写"></a>重写</h4><p>其实上面的代码继承就已经使用了重写了，就是对父类的方法的重新定义</p>
<h4 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h4><p>同时ts里面的类的属性也具有 <strong>public、private、protect</strong>  这种修饰符，同时<strong>readonly</strong>也是可以在上面使用的。默认所有属性都是public</p>
<blockquote>
<p>public 允许在类的内部和外部被调用.</p>
<p>private 访问属性的意思是，只允许在类的内部被调用，外部不允许调用</p>
<p>protected 允许在类内及继承的子类中使用</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    <span class="keyword">private</span> name: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">readonly</span> age:<span class="built_in">number</span>;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">theName: <span class="built_in">string</span></span>)</span> &#123; <span class="built_in">this</span>.name = theName; &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Animal(<span class="string">&quot;Cat&quot;</span>).name; <span class="comment">// 错误: &#x27;name&#x27; 是私有的.</span></span><br></pre></td></tr></table></figure>

<h4 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">greet</span> </span>&#123;</span><br><span class="line">    hei = <span class="string">&#x27;cas&#x27;</span></span><br><span class="line">    <span class="keyword">private</span> wid: <span class="built_in">string</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">width?: <span class="built_in">string</span></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.wid = width || <span class="string">&#x27;s&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.hei);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">78</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> my8 = <span class="keyword">new</span> greet(<span class="string">&#x27;87&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">greet1</span> <span class="keyword">extends</span> <span class="title">greet</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(<span class="string">&#x27;99&#x27;</span>)	<span class="comment">// 依旧要符合规则的使用super调用父类的构造函数，这里就是里面的参数必须是一个string类型</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;this.wid:&#x27;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">12</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="getter和setter"><a href="#getter和setter" class="headerlink" title="getter和setter"></a>getter和setter</h4><p>主要是配合private修饰符进行使用，先将一个属性标位private，然后暴露一个getter和setter方法，之后就能预先进行处理或者做些其他的东西</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">greet1</span> <span class="keyword">extends</span> <span class="title">greet</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"><span class="keyword">private</span> _hello: <span class="built_in">string</span></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(_hello)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;this.wid:&#x27;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">12</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">get</span> <span class="title">hello</span>() &#123;	<span class="comment">// 这只是一个属性，不是一个方法</span></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>._hello+<span class="string">&#x27;2&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">set</span> <span class="title">hello</span>(<span class="params">hello: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="built_in">this</span>._hello = hello</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> my9 = <span class="keyword">new</span> greet1(<span class="string">&#x27;hello1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;my9: &#x27;</span>, my9.hello);	<span class="comment">// hello12 ，注意这里的调用方式</span></span><br></pre></td></tr></table></figure>

<h4 id="抽象类"><a href="#抽象类" class="headerlink" title="抽象类"></a>抽象类</h4><p>抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。 <code>abstract</code>关键字是用于定义抽象类和在抽象类内部定义抽象方法。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="class"><span class="keyword">class</span> <span class="title">abs</span> </span>&#123;</span><br><span class="line">    <span class="keyword">abstract</span> sayhi(): <span class="built_in">string</span>;</span><br><span class="line">    move(): <span class="built_in">void</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;hi&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">abs1</span> <span class="keyword">extends</span> <span class="title">abs</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">sayhi</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;78&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> my10 = <span class="keyword">new</span> abs1()</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;my10: &#x27;</span>, my10.sayhi()); <span class="comment">// 78</span></span><br></pre></td></tr></table></figure>

<h4 id="把类当做接口使用"><a href="#把类当做接口使用" class="headerlink" title="把类当做接口使用"></a>把类当做接口使用</h4><p>类定义会创建两个东西：类的实例类型和一个构造函数。 因为类可以创建出类型，所以你能够在允许使用接口的地方使用类。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Point</span> </span>&#123;</span><br><span class="line">    <span class="attr">x</span>: <span class="built_in">number</span>;</span><br><span class="line">    y: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> Point3d <span class="keyword">extends</span> Point &#123;</span><br><span class="line">    <span class="attr">z</span>: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> point3d: Point3d = &#123;<span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span>, <span class="attr">z</span>: <span class="number">3</span>&#125;;</span><br></pre></td></tr></table></figure>



<h3 id="联合类型和类型保护"><a href="#联合类型和类型保护" class="headerlink" title="联合类型和类型保护"></a>联合类型和类型保护</h3><p>联合类型，可以认为一个变量可能有两种或两种以上的类型</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Waiter &#123;</span><br><span class="line">  <span class="attr">anjiao</span>: <span class="built_in">boolean</span>;</span><br><span class="line">  say: <span class="function">() =&gt;</span> &#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> Teacher &#123;</span><br><span class="line">  <span class="attr">anjiao</span>: <span class="built_in">boolean</span>;</span><br><span class="line">  skill: <span class="function">() =&gt;</span> &#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">judgeWho</span>(<span class="params">animal: Waiter | Teacher</span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>但有时候在一个函数里面不能判断这个变量是哪种类型，该用那些方法，所以就需要类型断言</p>
<h3 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h3><p>类型断言就是通过断言的方式确定传递过来的准确值。通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">judgeWho</span>(<span class="params">animal: Waiter | Teacher</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (animal.anjiao) &#123;</span><br><span class="line">    (animal <span class="keyword">as</span> Teacher).skill();</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    (animal <span class="keyword">as</span> Waiter).say();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>还有一些其他的方式，比如 **in/ typeof/ instanseof/  **</p>
<h3 id="函数泛型"><a href="#函数泛型" class="headerlink" title="函数泛型"></a><a target="_blank" rel="noopener" href="https://www.jspang.com/detailed?id=63#toc380">函数泛型</a></h3><p>一种对代码的重用方式</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">join</span>(<span class="params">first: <span class="built_in">string</span> | <span class="built_in">number</span>, second: <span class="built_in">string</span> | <span class="built_in">number</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;first&#125;</span><span class="subst">$&#123;second&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line">join(<span class="string">&quot;chengsong&quot;</span>, <span class="string">&quot;.info&quot;</span>);</span><br></pre></td></tr></table></figure>

<p>当我们需要第一个参数的类型为string的时候，第二个参数的类型也要是string，这就需要泛型了</p>
<p>泛型的定义使用 <code>&lt;&gt;</code>（尖角号）进行定义，使用也需要使用带上<code>&lt;&gt;</code></p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">join</span>&lt;<span class="title">T</span>&gt;(<span class="params">first: T, second: T</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;first&#125;</span><span class="subst">$&#123;second&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line">join&lt;<span class="built_in">string</span>&gt;(<span class="string">&quot;chengsong&quot;</span>, <span class="string">&quot;.info&quot;</span>);</span><br></pre></td></tr></table></figure>

<h4 id="泛型数组"><a href="#泛型数组" class="headerlink" title="泛型数组"></a>泛型数组</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">al</span>&lt;<span class="title">T</span>&gt;(<span class="params">params: T[]</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;params: &#x27;</span>, params);</span><br><span class="line">&#125;</span><br><span class="line">al&lt;<span class="built_in">number</span>&gt;([<span class="number">32</span>, <span class="number">32</span>])</span><br></pre></td></tr></table></figure>

<h4 id="多泛型定义"><a href="#多泛型定义" class="headerlink" title="多泛型定义"></a>多泛型定义</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">al</span>&lt;<span class="title">T</span>, <span class="title">P</span>&gt;(<span class="params">params: T[], param2: P</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;params: &#x27;</span>, params);</span><br><span class="line">&#125;</span><br><span class="line">al&lt;<span class="built_in">number</span>, <span class="built_in">string</span>&gt;([<span class="number">32</span>, <span class="number">32</span>], <span class="string">&#x27;43&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>当然，泛型也可以进行推断，但一般不进行使用，因为代码的可读性和健壮性都会降低</p>
<h3 id="泛型接口"><a href="#泛型接口" class="headerlink" title="泛型接口"></a>泛型接口</h3><p>在定义接口时, 为接口中的属性或方法定义泛型类型<br>在使用接口时, 再指定具体的泛型类型</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> IbaseCRUD &lt;T&gt; &#123;</span><br><span class="line">  <span class="attr">data</span>: T[]</span><br><span class="line">  <span class="attr">add</span>: <span class="function">(<span class="params">t: T</span>) =&gt;</span> <span class="built_in">void</span></span><br><span class="line">  <span class="attr">getById</span>: <span class="function">(<span class="params">id: <span class="built_in">number</span></span>) =&gt;</span> T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span> </span>&#123;</span><br><span class="line">  id?: <span class="built_in">number</span>; <span class="comment">//id主键自增</span></span><br><span class="line">  name: <span class="built_in">string</span>; <span class="comment">//姓名</span></span><br><span class="line">  age: <span class="built_in">number</span>; <span class="comment">//年龄</span></span><br><span class="line"></span><br><span class="line">  <span class="title">constructor</span> (<span class="params">name, age</span>) &#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">    <span class="built_in">this</span>.age = age</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用接口</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserCRUD</span> <span class="title">implements</span> <span class="title">IbaseCRUD</span> &lt;<span class="title">User</span>&gt; </span>&#123;</span><br><span class="line">  <span class="attr">data</span>: User[] = []</span><br><span class="line">  </span><br><span class="line">  add(user: User): <span class="built_in">void</span> &#123;</span><br><span class="line">    user = &#123;...user, <span class="attr">id</span>: <span class="built_in">Date</span>.now()&#125;</span><br><span class="line">    <span class="built_in">this</span>.data.push(user)</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;保存user&#x27;</span>, user.id)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  getById(id: <span class="built_in">number</span>): User &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.data.find(<span class="function"><span class="params">item</span> =&gt;</span> item.id===id)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userCRUD = <span class="keyword">new</span> UserCRUD()</span><br><span class="line">userCRUD.add(<span class="keyword">new</span> User(<span class="string">&#x27;tom&#x27;</span>, <span class="number">12</span>))</span><br><span class="line">userCRUD.add(<span class="keyword">new</span> User(<span class="string">&#x27;tom2&#x27;</span>, <span class="number">13</span>))</span><br><span class="line"><span class="built_in">console</span>.log(userCRUD.data)</span><br></pre></td></tr></table></figure>

<h3 id="类中泛型"><a href="#类中泛型" class="headerlink" title="类中泛型"></a>类中泛型</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SelectGirl</span>&lt;<span class="title">T</span>&gt; </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"><span class="keyword">private</span> girls: T[]</span>)</span> &#123;&#125;</span><br><span class="line">  getGirl(index: <span class="built_in">number</span>): T &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.girls[index];</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> selectGirl = <span class="keyword">new</span> SelectGirl&lt;<span class="built_in">string</span>&gt;([<span class="string">&quot;大脚&quot;</span>, <span class="string">&quot;刘英&quot;</span>, <span class="string">&quot;晓红&quot;</span>]);</span><br></pre></td></tr></table></figure>

<h4 id="泛型继承"><a href="#泛型继承" class="headerlink" title="泛型继承"></a>泛型继承</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> gril3 &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">segr</span>&lt;<span class="title">T</span> <span class="keyword">extends</span> <span class="title">gril3</span>&gt;</span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"><span class="keyword">private</span> girls: T[]</span>)</span> &#123; &#125;</span><br><span class="line">    getGirl(index: <span class="built_in">number</span>): <span class="built_in">string</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.girls[index].name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> selectgr = <span class="keyword">new</span> segr([&#123; <span class="attr">name</span>: <span class="string">&#x27;cs&#x27;</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&#x27;js&#x27;</span> &#125;])</span><br></pre></td></tr></table></figure>

<p>这段代码的意思，就是我们在<code>SelectGirl</code>类中使用了泛型，意思是我不知道我以后要用什么类型，但是我有一个约束条件，这个类型，必须要有一个<code>name</code>属性</p>
<h3 id="泛型约束"><a href="#泛型约束" class="headerlink" title="泛型约束"></a>泛型约束</h3><p>当一个泛型只能是number或string的时候，就需要对这个泛型进行约束，就是继承所需要的几种类型</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SelectGirl2</span>&lt;<span class="title">T</span> <span class="keyword">extends</span> <span class="title">string</span> | <span class="title">number</span>&gt; </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"><span class="keyword">private</span> girls: T[]</span>)</span> &#123; &#125;</span><br><span class="line">    getGirl(index: <span class="built_in">number</span>): T &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.girls[index];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="命名空间-namespace"><a href="#命名空间-namespace" class="headerlink" title="命名空间 namespace"></a>命名空间 namespace</h3><p>简单的说，这个就是减少了全局变量的可能带来的错误</p>
<p>一般可以使用 <strong>export</strong> 导出模块，这样就只有导出的那一个名字是全局的</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">namespace</span> Shapes &#123;	<span class="comment">// 使用namespace进行定义</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">namespace</span> Polygons &#123;</span><br><span class="line">        <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Triangle</span> </span>&#123; &#125;</span><br><span class="line">        <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Square</span> </span>&#123; &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这一部分好像需要对comonjs和amd这两个规范进行区分，</p>
<h3 id="声明文件"><a href="#声明文件" class="headerlink" title="声明文件"></a>声明文件</h3><p>差不多就是对一个外部引入的文件的类型的提示</p>
<h3 id="tsconfig-json"><a href="#tsconfig-json" class="headerlink" title="tsconfig.json"></a><a target="_blank" rel="noopener" href="https://www.tslang.cn/docs/handbook/tsconfig-json.html">tsconfig.json</a></h3><p>用来配置如何对<code>ts</code>文件进行编译</p>
<p>可使用<code>tsc --init</code> 生成配置文件</p>
<p>配置了配置文件之后，可通过 <code>tsc</code> 命令运行配置文件和此目录里面的ts文件</p>
<h4 id="选择编译文件"><a href="#选择编译文件" class="headerlink" title="选择编译文件"></a>选择编译文件</h4><p><code>&quot;files&quot;</code>指定一个包含相对或绝对文件路径的列表。<code>&quot;include&quot;</code>和<code>&quot;exclude&quot;</code>属性指定一个文件glob匹配模式列表。 支持的glob通配符有：</p>
<ul>
<li><code>*</code> 匹配0或多个字符（不包括目录分隔符）</li>
<li><code>?</code> 匹配一个任意字符（不包括目录分隔符）</li>
<li><code>**/</code> 递归匹配任意子目录</li>
</ul>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;files&quot;</span>: [<span class="string">&quot;demo1.ts&quot;</span>],</span><br><span class="line">    <span class="attr">&quot;include&quot;</span>: [	<span class="comment">// 包含的文件</span></span><br><span class="line">            <span class="string">&quot;src/**/*&quot;</span></span><br><span class="line">        ],</span><br><span class="line">    <span class="attr">&quot;exclude&quot;</span>: [	<span class="comment">// 不包含的文件</span></span><br><span class="line">            <span class="string">&quot;node_modules&quot;</span>,</span><br><span class="line">            <span class="string">&quot;**/*.spec.ts&quot;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>使用<code>&quot;include&quot;</code>引入的文件可以使用<code>&quot;exclude&quot;</code>属性过滤。 然而，通过 <code>&quot;files&quot;</code>属性明确指定的文件却总是会被包含在内，不管<code>&quot;exclude&quot;</code>如何设置</p>
<h4 id="compilerOptions属性"><a href="#compilerOptions属性" class="headerlink" title="compilerOptions属性"></a>compilerOptions属性</h4><p>这个就是这个配置文件里面的配置属性</p>
<blockquote>
<p>ts-node命令遵循此配置文件</p>
</blockquote>
<p><strong>removeComments</strong> 表示是否删除文件里面的注释</p>
<p><strong>strict</strong> 是都使用严格模式</p>
<p><strong>noImplicitAny</strong>属性的作用是，允许你的注解类型 any 不用特意表明，即可以隐去any，在严格模式下也不会报错</p>
<p><strong>strictNullChecks</strong>设置为<code>false</code>,它的意思就是，<strong>不强制检查 NULL 类型。</strong></p>
<p><strong>outDir</strong> 指定编译后的js文件存放的位置</p>
<hr>
<h2 id="vue3-ts"><a href="#vue3-ts" class="headerlink" title="vue3+ts"></a>vue3+ts</h2><p>这一部分就用来记录vue3+ts如何简单的创建和开发一个项目，之前看见了这样做的一个项目，<a target="_blank" rel="noopener" href="https://gitee.com/cheng_song/shirakami-haruka-button">地址</a>，虽然比较简单，但还是简单的知道了如何的进行使用。</p>
<p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1CK411u75G?from=search&seid=17254476489215804631">学习地址</a></p>
<p><a target="_blank" rel="noopener" href="https://24kcs.github.io/vue3_study/chapter2/1_type.html#%E6%9E%9A%E4%B8%BE">视频笔记</a></p>
<p><a target="_blank" rel="noopener" href="https://v3.vuejs.org/guide/typescript-support.html">vue3官方TS支持</a></p>
<p>一个建议，如果项目开发团队没有超过3个人，基本没有必要使用ts进行开发</p>
<h3 id="props参数类型"><a href="#props参数类型" class="headerlink" title="props参数类型"></a><a target="_blank" rel="noopener" href="https://vue3js.cn/docs/zh/guide/typescript-support.html#%E6%B3%A8%E9%87%8A%E8%BF%94%E5%9B%9E%E7%B1%BB%E5%9E%8B">props参数类型</a></h3><p>Vue 对定义了 <code>type</code> 的 prop 执行运行时验证。要将这些类型提供给 TypeScript，我们需要使用 <code>PropType</code> 强制转换构造函数</p>
<p>在组件的props里面传入的参数有时候需要指定其类型，对于这个类型，如果不是默认的几个基本类型，就需要断言进行指定</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineComponent, PropType &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line">interface Book &#123;</span><br><span class="line">  <span class="attr">title</span>: string</span><br><span class="line">  <span class="attr">author</span>: string</span><br><span class="line">  <span class="attr">year</span>: number</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Component = defineComponent(&#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">String</span>,</span><br><span class="line">    <span class="attr">success</span>: &#123; <span class="attr">type</span>: <span class="built_in">String</span> &#125;,</span><br><span class="line">    <span class="attr">callback</span>: &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="built_in">Function</span> <span class="keyword">as</span> PropType&lt;<span class="function">() =&gt;</span> <span class="keyword">void</span>&gt;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">book</span>: &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="built_in">Object</span> <span class="keyword">as</span> PropType&lt;Book&gt;,</span><br><span class="line">      required: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="响应式数据"><a href="#响应式数据" class="headerlink" title="响应式数据"></a>响应式数据</h3><p>有时我们可能需要为 ref 的内部值指定复杂类型。我们可以在调用 ref 重写默认推理时简单地传递一个泛型参数：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> year = ref&lt;<span class="built_in">string</span> | <span class="built_in">number</span>&gt;(<span class="string">&#x27;2020&#x27;</span>) <span class="comment">// year&#x27;s type: Ref&lt;string | number&gt;</span></span><br><span class="line"></span><br><span class="line">year.value = <span class="number">2020</span> <span class="comment">// ok!</span></span><br></pre></td></tr></table></figure>

<p>同理 reactive 也可以，不过一般是一个interface类型定义的数据</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">interface</span> Todos &#123;</span><br><span class="line">    <span class="attr">id</span>: <span class="built_in">number</span>;</span><br><span class="line">    name: <span class="built_in">string</span>;</span><br><span class="line">    iscomplete: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> todos = reactive&lt;&#123; <span class="attr">todos</span>: Todos[] &#125;&gt;(&#123;</span><br><span class="line">      <span class="attr">todos</span>: [&#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&quot;cs&quot;</span>, <span class="attr">iscomplete</span>: <span class="literal">false</span> &#125;],</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">let</span> todos1 = reactive&lt;Todos&gt;(&#123;</span><br><span class="line">       <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&quot;cs&quot;</span>, <span class="attr">iscomplete</span>: <span class="literal">false</span> </span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// or这种方式，我感觉这样更好一点</span></span><br><span class="line"><span class="keyword">let</span> todos3:Todos = reactive(&#123;</span><br><span class="line">       <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&quot;cs&quot;</span>, <span class="attr">iscomplete</span>: <span class="literal">false</span> </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="vuex里的使用"><a href="#vuex里的使用" class="headerlink" title="vuex里的使用"></a>vuex里的使用</h3><p>在vuex里面的action或者mutation需要state参数，如果不想将这个参数指定为any的话，就需要从vuex里面导入一些类型进行使用</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ActionContext &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="function"><span class="title">login</span>(<span class="params">&#123; commit &#125;: ActionContext&lt;UserState, <span class="built_in">any</span>&gt;, params: LoginParams</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> &#123; code, data, msg &#125; = <span class="keyword">await</span> userLogin(params)</span><br><span class="line">      <span class="keyword">if</span> (code === ERR_OK) &#123;</span><br><span class="line">        <span class="comment">// 先将token存在storage里面，然后再存在vuex里</span></span><br><span class="line">        commit(<span class="string">`<span class="subst">$&#123;types.SET_TOKEN&#125;</span>`</span>, setToken(data))</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="literal">true</span>)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(msg)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(e)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="vue-router里的使用"><a href="#vue-router里的使用" class="headerlink" title="vue-router里的使用"></a>vue-router里的使用</h3><p>基础的所有路由对象都会有一个类型，需要按照这个类型进行规范</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHashHistory, RouteRecordRaw &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> basicRoutes: AppRouteRecordRaw[] = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">    <span class="attr">redirect</span>: <span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/home/index.vue&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/home/index.vue&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/login&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;Login&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/login/index.vue&#x27;</span>),</span><br><span class="line">    <span class="attr">meta</span>: &#123;</span><br><span class="line">      <span class="attr">title</span>: <span class="string">&#x27;登陆&#x27;</span>,</span><br><span class="line">      <span class="attr">hideFooter</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">hideHeader</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">hideSidebar</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>还有一个关于记录滚动的位置的滚动行为 scrollBehavior ，这个方法里面的参数也需要指定类型</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; RouteLocation &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">scrollBehavior</span> (<span class="params">to: RouteLocation, <span class="keyword">from</span>: RouteLocation, savedPosition: <span class="built_in">any</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (savedPosition) &#123;</span><br><span class="line">    <span class="keyword">return</span> savedPosition</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">left</span>: <span class="number">0</span>, <span class="attr">top</span>: <span class="number">0</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = createRouter(&#123;</span><br><span class="line">  <span class="attr">history</span>: createWebHashHistory(),</span><br><span class="line">  <span class="attr">scrollBehavior</span>: scrollBehavior,</span><br><span class="line">  <span class="attr">routes</span>: routes</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">晟松</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://chengsong.info/2021/03/08/typescript-vue3简单学习/">https://chengsong.info/2021/03/08/typescript-vue3简单学习/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://chengsong.info">晟松</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/ts-vue3/">ts vue3</a></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2021/04/12/%E8%AE%B0%E4%B8%80%E6%AC%A1%E7%94%B5%E8%AF%9D%E9%9D%A2%E8%AF%95/"><i class="fa fa-chevron-left">  </i><span>记一次电话面试</span></a></div><div class="next-post pull-right"><a href="/2021/02/15/vue3%E8%A7%86%E9%A2%91%E7%AE%80%E5%8D%95%E8%AE%B0%E5%BD%95/"><span>vue3视频简单记录</span><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(/img/blog-bg.jpg)"><div class="layout" id="footer"><div class="copyright">&copy;2020 - 2023 By 晟松</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="icp"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><span>湘ICP备2020021729号</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
  $('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>